﻿@model Nop.Plugin.Widgets.BsProductVideo.Models.PublicInfoModel
@{
    Layout = "";


}
@using Nop.Web.Framework.UI

@foreach (var embedVideo in Model.EmbedVideoRecordModels)
{
    <div class="video-holder">
        <a class="video-thumb">
            <img data-embedvideoid="@embedVideo.Id" src="@embedVideo.VideoThumbUrl" alt="VideoThumpLink" data-embedvideohtmlcode="@embedVideo.EmbedVideoHtmlCode" />
        </a>
    </div>
    <div class="video-output video-@embedVideo.Id"></div>
    <div id="embedvideo_@embedVideo.Id" class="embeded-video" style="display:none">
        @Html.Raw(@embedVideo.EmbedVideoHtmlCode)
    </div>
}

<script>

    if ($(".picture-thumbs").length > 0) {
        $(".picture-thumbs").append($(".video-holder > a"));
    }
    else {
        //$(".picture").insertAfter("<div class='picture-thumbs'></div>")
        $("<div class='picture-thumbs'></div>").insertAfter(".picture");
        $(".picture-thumbs").append($(".video-holder > a"));
    }

    $( '.video-thumb').click(function() {
        var testsrc = "";
        var test = "";
        testsrc = $(this).find("img").data('embedvideohtmlcode');
        test = $(testsrc).attr('src');
        test = test + '?autoplay=1&rel=0';
         $.magnificPopup.open({
            items: {
                src: '<iframe style="text-align: center;" width="854" height="480" src=' + test + ' frameborder="0" allowfullscreen></iframe>',
                type: 'inline',

            },
            closeBtnInside: false,
            closeOnContentClick: false,
            closeOnBgClick: false
        });
    });
  

</script>